<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>
<script>
  import echarts from 'echarts';

  export default {
    name: 'cyclicChart',
    props: {
      config: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        chart: '',
      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));

      //   this.initChart();
    },
    methods: {
      initChart() {
        let option = {
          title: {
            show: true,
            text: this.config.option.value + '%',
            x: 'center',
            y: 'center',
            // top: 50,
            textStyle: {
              fontSize: 18,
              color: this.config.option.txtColor,
              fontWeight: 'normal'
            },
            // subtext: '占预期\n目标',
            // subtextStyle: {
            //   color: '#FFFFFF',
            //   fontSize: 18
            // }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{d}%",
            show: false
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            show: false
          },
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: this.config.option.startColor
              }, {
                offset: 1,
                color: this.config.option.endColor
              }]
            }
          },
          series: {
            name: '',
            type: 'pie',
            radius: ['45%', '65%'],
            avoidLabelOverlap: true,
            hoverAnimation: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
                value: this.config.option.value,
                name: ''
              },
              {
                value: 100 - this.config.option.value,
                name: '',
                itemStyle: {
                  color: '#013366'
                }
              }
            ]
          }
        };

        this.chart.setOption(option);
      }
    }
  }

</script>

<style lang="scss" scoped>
   
</style>
